
<template>
  <div id="chooseCityC">
    <div class="top">
      <div class="search">
        <img src="../../../wechat/static/images/sy_ss.png" alt>
        <input type="text" v-model="searchName" placeholder="输入城市名">
      </div>
    </div>
    <div class="middle">
      当前城市：
      <span @click="getLocalData2">{{localCity}}</span>
    </div>
    <div class="bottom">
      <ul>
        <li v-for="(item, index) in cityList" :key="index+'x'" v-show="searchName===''">
          <span>{{item.ssqname}}</span>
          <a class="weui-btn weui-btn_plain-default" v-for="(item2, index2) in item.cities.city" :key="index2" @click="jumpIndex(item,item2)">{{item2.ssqname}}</a>
        </li>
        <li v-for="(item, index) in cityList" :key="index" v-show="searchName !== ''">
          <span>{{item.ssqname}}</span>
          <a class="weui-btn weui-btn_plain-default" v-for="(item2, index2) in item.cities.city" :key="index2" @click="jumpIndex(item,item2)">{{item2.ssqname}}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import cityList from "../../../wechat/static/util/city.json";
export default {
  name: "chooseCityC",
  data() {
    return {
      // cityList:cityList.provinces.province,
      searchName: "",
      localCity: "正在获取中",
      localCityCode: ""
    };
  },
  computed: {
    cityList() {
      var arr = [];
      var province = cityList.provinces.province;
      if (this.searchName === "") {
        arr = province;
      } else {
        province.forEach(element => {
          if (element.ssqname.indexOf(this.searchName) > -1) {
            arr.push(element);
          } else {
            element.cities.city.forEach(element2 => {
              var arrChild = [];
              if (element2.ssqname.indexOf(this.searchName) > -1) {
                arrChild.push(element2);
              }
              if (arrChild.length > 0) {
                arr.push({
                  ssqid: "",
                  ssqname: element.ssqname,
                  ssqename: "",
                  cities: { city: arrChild }
                });
              }
            });
          }
        });
      }

      console.log(arr);
      return arr;
    }
  },
  mounted() {
    this.configSet()
    this.getLocalData();
  },
  created() {},
  methods: {
    configSet(){
      var pageUrl = window.location.href
      let url = `${this.$CONSTANT.WX.indexJsRequire}?url=${pageUrl}`;
      this.$common.post(url, {}, res => {
          if (res.status == 200) {
            let data = res.data.bussData;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名
                jsApiList: [
                        "checkJsApi", //判断当前客户端版本是否支持指定JS接口
                        "previewImage",
                        "onMenuShareTimeline", //分享到朋友圈
                        "onMenuShareAppMessage", //分享给朋友
                        "openLocation",
                        "getLocation",
                        "scanQRCode",
                        "chooseWXPay"
                    ] // 必填，需要使用的JS接口列表
            });
          } else {
            this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: "auto"
            });
          }
        });
    },
    getLocalData() {
      var that = this;
      console.log("开始定位");
      wx.getLocation({
        type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function(res) {
          console.log("获取当前定位：", res);
          var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
          var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
          var speed = res.speed; // 速度，以米/每秒计
          var accuracy = res.accuracy; // 位置精度
          var geocoder = new qq.maps.Geocoder({
            complete: function(result) {
              //解析成功的回调函数
              console.log("result");
              console.log(result);
              that.get3(result);
            }
          });
          geocoder.getAddress(new qq.maps.LatLng(latitude, longitude));
        },
        fail() {
          console.log("获取定位失败");
          that.localCity = "获取定位失败";
        }
      });
    },
    get3(res) {
      if (res) {
        var province = res.detail.addressComponents.province;
        var city = res.detail.addressComponents.city;
        if (
          province == "北京市" ||
          province == "上海市" ||
          province == "天津市" ||
          province == "重庆市"
        ) {
          province = province.substr(0, 2);
        }
        this.getCode(province, city);
      } else {
        this.localCity = "获取定位失败";
      }
    },
    getCode(province, city) {
      var provincesssssssss = cityList.provinces.province; //各省，直辖市
      provincesssssssss.forEach(element => {
        if (element.ssqname.indexOf(province) > -1) {
          if (
            province == "北京" ||
            province == "上海" ||
            province == "天津" ||
            province == "重庆"
          ) {
            this.localCity = province;
            this.localCityCode = element.ssqid;
          } else {
            element.cities.city.forEach(element2 => {
              if (element2.ssqname.indexOf(city) > -1) {
                this.localCity = city;
                this.localCityCode = element2.ssqid;
              }
            });
          }
        }
      });
      console.log(this.localCity);
      console.log(this.localCityCode);
    },
    getLocalData2() {
      localStorage.setItem("cityName", this.localCity);
      localStorage.setItem("cityCode", this.localCityCode);
      this.$router.back();
    },
    jumpIndex(item, item2) {
      if (
        item.ssqname == "北京" ||
        item.ssqname == "天津" ||
        item.ssqname == "上海" ||
        item.ssqname == "重庆"
      ) {
        localStorage.setItem("cityName", item.ssqname + item2.ssqname);
      } else {
        localStorage.setItem("cityName", item2.ssqname);
      }
      localStorage.setItem("cityCode", item2.ssqid);
      this.$router.back();
    }
  },
  components: {}
};
</script>

<style lang="less">
#chooseCityC {
  .top {
    .search {
      width: 88.8%;
      margin: 13px 0 13px 21px;
      background: #fff;
      border: 1px solid transparent;
      border-radius: 20px;
      // padding: 15px;
      img {
        width: 15px;
        height: 15px;
        vertical-align: middle;
        padding-left: 15px;
      }
      input {
        font-family: MicrosoftYaHeiUI;
        font-size: 13px;
        color: #333;
        border: none;
        padding-left: 8px;
        width: 50%;
      }
    }
  }
  .middle {
    height: 49px;
    line-height: 49px;
    background: #fff;
    padding-left: 10px;
    font-family: PingFang-SC-Medium;
    color: #333;
    font-size: 14px;
    span {
      margin-left: 17px;
      color: #ec1b24;
    }
  }
  .bottom {
    span {
      display: block;
      font-family: PingFang-SC-Medium;
      color: #999;
      font-size: 15px;
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
    }
    a {
      display: block;
      height: 49px;
      line-height: 49px;
      line-height: 49px;
      background-color: #fff;
      border-radius: 2px;
      font-family: PingFang-SC-Medium;
      color: #666;
      font-size: 15px;
      padding-right: 10px;
      padding-left: 10px;
      &:hover {
        background-color: #dcd9d9;
      }
      &::after,
      &:before {
        border-bottom: 1px solid #e1e1e1;
      }
      &:last-child {
        &:after {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
